<!--
    页面title模板
    title: 标题名称
    rankNum:右侧排名图标和文字显示，不传，不显示右侧图标
    rightButton：右侧展示文字，传该参数
    rightIconButton：右侧展示图标，传该参数
    iconPageTitleList：右侧展示icon时，如果有下拉框展示，该字段传值
    clickRightIconButton：在父元素中调用，获取当前点击的信息
    父组件向pageTitle组件传icon图标名称时，需要转换一下名称的格式 阿里图标为 &#xe65a; 需要转换成 \ue65a 传过来
 -->
<template>
    <div id='pageTitle' class="pageTitle" :class="position">
        <div class="pTitle" ref="pTitle">
            <span class="iconfont back" @click="back" htmdEvt='back_btn'>&#xe666;</span>
            <h2 class="title">{{title}}</h2>

            <!-- 右侧为文字说明 -->
            <span class="explain" v-if="rightButton" @click="clickRightButton" htmdEvt='explain_btn'></span>

            <!-- 右侧为icon -->
            <span class="explain" v-if="rightIconButton && rightIconButton.type && rightIconButton.type == 'icon'" htmdEvt='explain_btn' @click="isShowList()">
                <i class="iconfont" style="color: #1D212B;" v-html="rightIconButton.className"></i>
            </span>

            <!-- 点击icon展示的内容 如果-->
            <div class="titleIconList" v-show="showIconList">
                <slot ref="iconList"></slot>
            </div>

        </div>
    </div>
</template>
<script>
export default {
    name: 'pageTitle',
    props: {
        title: { //调整暂无数据图片的位置
            type: String,
        },
        backUrl:{ //返回按钮地址
            type: String,
            default: 'close'
        },
        backParams:{ //返回按钮传参
            type: Object,
            default () {
                return {}
            }
        },
        position: { //头部的position样式控制
          type: String,
        },
        // explain: {
        //     type: Boolean,
        // },
        clickRightButton: {
            type: Function,
            default () {
                return function(){}
            }
        },
        clickRightIconButton: {
            type: Function,
            default () {
                return function(){}
            }
        },
        rightButton: {
            type: String
        },
        rightIconButton: {
            type: Object
        },
        iconPageTitleList: {
            type: Array
        },

        //点击icon时执行的方法，默认为null
        iconCallback: null,
    },
    data() {
        return {
            activeIndex: null,

            showIconList: false
        }
    },
    created() {
    },
    // watch: {
    //   '$route': function(to, from) {
    //     debugger
    //     //路由改变时，修改this.backUrl变量的值
    //     if (to.name && to.path.length != 1) {
    //         debugger
    //         this.backUrl = '-1'
    //     }
    //   }
    // },

    // mounted(){
    //     this.beforeUrl = window.location.href;
    // },
    methods: {
        back(){
            /*
            * 会出现的情况：其他应用跳转任务管理详情页，点击返回要关闭详情页面
            * 处理：在详情页获取URL信息，获取isSkip字段信息，有的话说明是其他应用跳转过来的，点击返回按钮时调用closePage原生方法
            *       没有的话说明就是任务管理内部自己跳转
            *       其他页面没有设置isSkip参数，应该是不存在，排除对其他页面的影响
            * */
            if( window.location.href.indexOf('isSkip') != -1){
                //app打开的第一个页面
                if(window.appIsIOS){
                    //判断是否为wk壳子，是才用wk的方法，不是的话用原方法
                    !!window.webkit ? window.webkit.messageHandlers.colsePage.postMessage({}) : window.jsObj.colsePage();
                }else{
                    window.jsObj.colsePage();
                }
            }
            else{
                if( !!this.backUrl ){
                    //有传递指定路径
                    this.$router.push({path:this.backUrl})
                }
                else{
                    //没有指定路径
                    this.$router.go(-1);
                }
                
            }

           // if(this.backUrl == 'close'){
           //      //关闭页面，调用app方法
           //      window.jsObj.colsePage();
           // }else if(this.backUrl == '-1'){ //返回上一级
           //      //正常返回
           //      this.$router.go(-1);
           // }else if(this.backUrl){ //返回指定路径，传指定的参数
           //      //返回特定链接
           //      this.$router.push({path:this.backUrl, query:this.backParams})
           // }
        },
        // batchOperate(command) {
        //      switch (command) {
        //          case "batch_remarks":
        //              // this.dialogRemarks();
        //              break;
        //          case "export_excel":
        //              // this.exportExcel();
        //              break;
        //      }
        // },
        isShowList() {

            if( !!this.iconCallback && this.$utils.getVarType.isFunction(this.iconCallback) == 'function' ){
                //iconCallback是一个function
                this.iconCallback()
            }
            else{
                //没有传的话，默认切换展示 slot里的内容 
                this.showIconList = this.showIconList ? false : true
                // this.$refs.iconList.display = 'block';
            }


            // let status = this.$refs.iconList ? this.$refs.iconList.style.display : 'block';
            // if (status == 'none' || status == '') {
            //     this.$refs.iconList ? this.$refs.iconList.style.display = 'block' : console.log('');
            // } else {
            //     this.$refs.iconList ? this.$refs.iconList.style.display = 'none' : console.log('');
            // }
        },
        // 当页头右上角是图标时，点击展示下拉框，下拉框中的每一项点击时，把当前的选中信息传递给父组件，并修改选中状态
        currentActiveClick(index) {
            this.activeIndex = index;
            this.$emit('clickRightIconButton', index);
        }
        //跳转
        // goDetail(){
        //     if(this.type == 1){
        //        window.location.href = 'lgbCdn/newCustomer/newGuestStarRule/newGuestStarRule.html'
        //     }
        // }
    },

};

</script>

<style lang="less">

//引入了pageTitle的页面，
//body的高度，要去除pageTitle的高度
body{
    // height: calc(~"100% - 2.2rem") !important;
    padding-top: 2.2rem;
}

.pageTitle {
    position: fixed;
    /*position: relative;*/
    height: 2.2rem;
    z-index: 99999;
    top:0;
    left: 0;
    // -webkit-overflow-scrolling: auto;

    // &.relative{
    //     position: static;
    // }

    .pTitle{
        // padding: 0.8rem 0.6rem;
        color: rgb(51, 51, 51);
        font-size: .8rem;
        word-break: break-all;
        position: fixed;
        top: 0;
        width: 100%;
        left: 0;
        z-index: 400;
        background-color: #fff;
        height: 2.2rem;
        line-height: 2.2rem;
        border-bottom: 0.0125rem  /* 0.5/40 */ solid #ddd;
        .explain{
            position: absolute;
            top: 0;
            right: .75rem;
            color: #1D212B;
            font-size: .75rem;

            .iconfont{
                font-size: 1.0rem;
            }

            .iconList {
                display: none;
                position: absolute;
                top: 2.5rem;
                background-color: #FFFFFF;
                width: 6rem;
                left: -4.5rem;
                box-shadow: 0 2px 12px 0 rgba(0,0,0,0.14);
                border-radius: 6px;
                padding-left: 1rem;
                padding-right: 1rem;

                li {
                    font-size: 0.65rem;
                    color: #1D212B;
                    letter-spacing: 0;
                    text-align: center;
                }
                li.active {
                    color: #FF6500;
                }
                li:not(:last-child) {
                    border-bottom: 1px solid #E7E7E7;
                }
            }
        }
    }

    .back{
        font-size: 1.0rem;
        position: absolute;
        left: 0.6rem;
    }

    .title{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 86%;
        margin-left: auto;
        margin-right: auto;
        font-weight: 500;
        font-size: .85rem;
        text-align: center;
        color: #141C30;
    }

    // &:before {
    //     content: '';
    //     display: inline-block;
    //     width: .2rem;
    //     height: .65rem;
    //     background: rgb(255, 107, 0);
    //     position: absolute;
    //     top: 1rem;
    //     left: 0rem;
    // }

    // .pth2 {
    //     white-space: nowrap;
    //     overflow: hidden;
    //     text-overflow: ellipsis;
    // }

    // .pt87 {
    //     width: 86%;
    // }

    .ptIcon {
        position: absolute;
        width: 13%;
        top: 0.3rem;
        right: 0.6rem;
        text-align: center;

        .ptrank {
            display: inline-block;
            font-size: 0.5rem;
            color: #666;
        }

        .ptSvg {
            width: 1.1rem;
            height: 1rem;

        }

    }

}

</style>
